<template>
	<view class="container">
		<scroll-view class="list-scroll" scroll-y>
			<view v-for="(item, index) in listData" :key="index" class="data-card"
				:style="{borderLeft: `6rpx solid ${getRandomColor(index)}`}" @click="oricalRecordsFn(item)"
				@longpress="delHistory(item)">
				<view class="card-content">
					<!-- 左侧信息 -->
					<view class="left-info">
						<view class="water-icon" :style="{backgroundColor: getRandomColor(index) + '20'}">
						</view>
						<view class="text-info">
							<text class="title">{{item.measuringArr.length}}条测线</text>
							<text class="time">{{item.timeCL}}</text>
						</view>
					</view>

					<!-- 右侧数据 -->
					<view class="right-data">
						<view class="data-item">
							<text class="label">水深</text>
							<text class="value">{{item.wD}}</text>
						</view>
						<view class="data-item">
							<text class="label">流量</text>
							<text class="value">{{item.liusliangnub}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="删除" title="警告" content="是否删除历史记录，此操作不可恢复！"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				cezhanID: '', //id
				colorPalette: [
					"#3498db", // 蓝色
					"#2ecc71", // 绿色
					"#e67e22", // 橙色
					"#9b59b6", // 紫色
					"#1abc9c", // 蓝绿色
					"#f1c40f", // 黄色
					"#e74c3c", // 红色
					"#34495e" // 深蓝色
				]
			}
		},
		onLoad() {
			this.trafficList()
		},
		methods: {
			// 流量列表
			trafficList() {
				this.listData = this.vuex_flowHistory
				console.log('this.listData', this.listData);
			},
			// 跳转
			oricalRecordsFn(i) {
				// 历史详情
				uni.navigateTo({
					url: '/pages/record/historicalRecords?id=' + i.id,
				})
			},
			// 长按删除
			delHistory(i) {
				console.log(i);
				this.cezhanID = i.id
				this.$refs.alertDialog.open()

			},
			dialogConfirm() {
				console.log('点击确认')
				this.cezhanitem(this.cezhanID)
			},
			dialogClose() {
				console.log('点击关闭')
			},
			// 删除ID
			cezhanitem(id) {
				let it = id
				let arr = this.vuex_flowHistory
				let index = arr.findIndex(item => item.id == it);
				if (index !== -1) {
					arr.splice(index, 1);
				}
				this.cezhanlist = arr
				uni.$u.vuex('vuex_flowHistory', arr)
			},
			getRandomColor(index) {
				// 根据索引取模确保颜色循环使用
				return this.colorPalette[index % this.colorPalette.length];
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f8fafc;
		height: 100vh;
		box-sizing: border-box;

		.list-scroll {
			height: 100%;

			.data-card {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				.card-content {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left-info {
						display: flex;
						align-items: center;

						.water-icon {
							width: 30rpx;
							height: 60rpx;
							border-radius: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 20rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

						.text-info {
							.title {
								font-size: 32rpx;
								font-weight: 500;
								color: #333;
								display: block;
								margin-bottom: 4rpx;
							}

							.time {
								font-size: 26rpx;
								color: #94a3b8;
							}
						}
					}

					.right-data {
						display: flex;

						.data-item {
							margin-left: 30rpx;
							text-align: right;

							.label {
								text-align: center;
								font-size: 28rpx;
								color: #64748b;
								display: block;
								margin-bottom: 6rpx;
							}

							.value {
								text-align: center;
								font-size: 38rpx;
								font-weight: 600;
								color: #3768c2;
								display: block;
							}
						}
					}
				}
			}
		}
	}
</style>